<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>WebAssembly Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>
      <form name="factorial_form" onSubmit="return factorial_submit()">
        Number: <input type="text" name="input" value="6"/>
        <br/><br/>
        Result: <span id="factorial_result">...</span>
        <br/><br/>
        <input name="Submit"  type="submit" value="Calculate"/>
      </form>
    </p>
    <script src="index.js"></script>
    <script>
      function factorial_submit() {
        // This function is called by the form. We now call into the
        // Hello.FactorialInElement() C# method, passing the input (a number)
        // and the element ID which should be set with the result (here, the
        // <span> element defined above. 
        var input = document.forms["factorial_form"]["input"].value;
        var klass = MonoClass("", "Hello");
        if (klass) {
          var method = MonoMethod(klass, "FactorialInElement", true);
          if (method) {
            MonoInvoke(0, method, [parseInt(input), "factorial_result"]);
          }
        }
        return false;
      }

      document.addEventListener('WebAssemblyContentLoaded', function() {
        // Calculate the initial form value.
        factorial_submit();
      }, false);
    </script>
  </body>
</html>

